<script setup>
/**
 * 修改个人设置
 */
import { useUserInfoStore } from '@/stores/useUserInfoStore.js'
import { NOUSE, showMessage } from '@/utils/elementUtil.js'
import { changeHeadImgAPI } from '@/api/userInfoAPI.js'
import ImageCropper from '@/components/ImageCropper.vue'
import { ref } from 'vue'

const emits = defineEmits(['back'])
const userInfoStore = useUserInfoStore()
const number = ref(0)
const imageCropperRef = ref(null)
const imgURL = ref(userInfoStore.headImgUrl)
const result = ref(null)

async function handleCanvasClick() {
    if (!imageCropperRef.value) return
    try {
        // 打开文件选择器   接收裁切好的图像  result 是裁剪后的图片Blob对象
        result.value = await imageCropperRef.value.openCropper()
        if (result.value) {
            imgURL.value = URL.createObjectURL(result.value)
        }
    } catch (error) {
        console.error('裁剪过程出错:', error)
    }
}

const back = () => {
    if (number.value === 0) {
        emits('back')
    } else {
        number.value = 0
    }
}

/**
 * 保存头像到服务器
 */
const save = async () => {
    if (result.value) {
        const formData = new FormData()
        formData.append('file', result.value)
        try {
            const res = await changeHeadImgAPI(formData)
            if (res.data.code === 1) {
                showMessage('头像上传成功', 'success')
                userInfoStore.headImgUrl = res.data.data
                console.log('userInfoStore.headImgUrl' + userInfoStore.headImgUrl)
            } else {
                console.error('头像上传失败:', res)
                showMessage('头像上传失败', 'error')
            }
        } catch (error) {
            console.error('上传头像失败:', error)
            showMessage('头像上传失败', 'error')
        }
    }
}
</script>

<template>
    <div>
        <div style="text-align: center">
            <div
                style="position: absolute; float: left; width: 80px; text-align: left"
                @click="back"
            >
                <div style="position: relative; left: 10px"><</div>
            </div>
            个人设置
        </div>
        <div class="btn-list" v-if="number === 0">
            <div style="height: 80px" @click="number = 1">
                <span>头像</span>
                <img :src="userInfoStore.headImgUrl" style="height: 60px; width: 60px" alt="" />
                <div>></div>
            </div>
            <div @click="NOUSE">
                <span>名称</span>
                <span>{{ userInfoStore.userName ? userInfoStore.userName : '未设置' }}</span>
                <div>></div>
            </div>
            <div @click="NOUSE">
                <span>手机号</span>
                <span>{{ userInfoStore.phoneNumber ? userInfoStore.phoneNumber : '未设置' }}</span>
                <div>></div>
            </div>
            <div @click="NOUSE">
                <span>邮件</span>
                <span>{{ userInfoStore.email ? userInfoStore.email : '未设置' }}</span>
                <div>></div>
            </div>
            <div @click="NOUSE">
                <span>密码</span>
                <span>修改</span>
                <div>></div>
            </div>
        </div>
        <div v-if="number === 1" style="position: relative">
            <img
                :src="imgURL"
                alt=""
                style="
                    border-radius: 12px;
                    position: relative;
                    left: 10px;
                    top: 10px;
                    border: 1px solid #000;
                    width: 120px;
                "
                @click="handleCanvasClick"
            />
            <button class="btn" style="top: 40px" @click="handleCanvasClick">切换</button>
            <button class="btn" style="" @click="save">保存</button>
            <ImageCropper ref="imageCropperRef" />
        </div>
    </div>
</template>

<style scoped>
span {
    margin: 5px;
    line-height: 50px;
}

.btn-list > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    width: 100%;
    border-bottom: 1px solid var(--el-border-color);

    div {
        width: 40px;
        text-align: center;
    }
}

.btn {
    position: absolute;
    top: 90px;
    left: 150px;
    height: 34px;
    width: 110px;
    background-color: transparent;
    border: 1px solid #000;
    border-radius: 2px;
}
</style>
